import { createRef, useState,RefObject, useEffect } from 'react' 
import './App.css'
import * as eCharts from 'echarts'
import  { echartsResize } from './util.ts'
import Chart from './components/LineChart'

function App() {

  // @types/react 中定义了 RefObject<HTMLDivElement>,
  // 在 vite 中可以直接从 react 中引用 RefObject，而不用从 @types/react 中引入
  const eChartsRef:RefObject<HTMLDivElement> = createRef();
  useEffect(() => {
    // console.log(eChartsRef.current)
    // init 参数 HTMLElement 
    const myChart = eCharts.init(eChartsRef.current as HTMLElement)
      let option = {
      title: {
        text: "ECharts 入门示例"
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '祙子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    }
    myChart.setOption(option)
    
    echartsResize(myChart)

  }, [])


  const [lineChartData,setLineChartData] = useState({
    title:'666',
    type:'category',
    xData: [
      "2021/08/13",
      "2021/08/14",
      "2021/08/15",
      "2021/08/16",
      "2021/08/17",
      "2021/08/18",
    ],
    seriesData: [22, 19, 88, 66, 5, 90],
  });
  useEffect(() => {
    setInterval(() => {
      setLineChartData({
        ...lineChartData,
        xData:[...lineChartData.xData,`2021/08/19`],
        seriesData:[...lineChartData.seriesData,Math.floor(Math.random() * 1000)]
      })
    },1500)
  },[])
  return (
    <div className="homeWrapper">
      <div ref={eChartsRef} className='chart'></div>
      <Chart {...lineChartData} />
    </div>
  )
}

export default App
